<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%# The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags %>
  <meta name="description" content="">
  <meta name="author" content="">
  <%= csrf_meta_tags %>
  <%= favicon_link_tag Images::Optimizer.call(Settings::General.favicon_url, width: 32) %>
  <title><%= controller_name.titleize %></title>

  <!-- StimulusJS -->
  <%= javascript_include_tag "admin", defer: true %>

  <%= stylesheet_link_tag "admin" %>

</head>
<body class="admin default-header"
  data-honeybadger-key="<%= j(ApplicationConfig["HONEYBADGER_JS_API_KEY"]) %>"
  data-deployed-at="<%= j(ForemInstance.deployed_at) %>"
  data-latest-commit-id="<%= j(ForemInstance.latest_commit_id) %>"
  data-ga-tracking="<%= j(Settings::General.ga_tracking_id) %>"
  data-ga4-tracking-id="<%= j(Settings::General.ga_analytics_4_id) %>"
  data-controller="snackbar"
  data-action="snackbar:add@document->snackbar#addItem">
  <div id="body-styles">
    <style>
      :root {
        --accent-brand-lighter-rgb: <%= Color::CompareHex.new([Settings::UserExperience.primary_brand_color_hex]).brightness(1.35, only_values: true) %>;
        --accent-brand-rgb: <%= Color::CompareHex.new([Settings::UserExperience.primary_brand_color_hex]).brightness(1, only_values: true) %>;
        --accent-brand-darker-rgb: <%= Color::CompareHex.new([Settings::UserExperience.primary_brand_color_hex]).brightness(0.8, only_values: true) %>;
      }
    </style>
  </div>
  <header class="crayons-header">
    <span id="route-change-target" tabindex="-1"></span>
    <a href="#main-content" class="skip-content-link"><%= t("views.main.header.skip") %></a>
    <div class="crayons-header__container">
      <%= render "layouts/logo" %>

      <h1 class="pl-4 fs-base hidden s:block">
        <a class="c-link c-link--branded" href="<%= admin_path %>">Admin</a>
        <span class="color-base-60">&raquo;</span>
        <span class="fw-medium">
          <%= yield(:h1).presence || controller_name.titleize %>
        </span>
      </h1>

      <nav aria-label="header" class="flex items-center h-100 ml-auto">
        <%= link_to "Help", "https://admin.forem.com/", class: "c-link c-link--block whitespace-nowrap" %>
        <%= link_to "Home page", root_path, class: "c-link c-link--block whitespace-nowrap" %>
      </nav>
    </div>
  </header>

  <div class="crayons-layout crayons-layout--admin-2-cols">
    <div class="admin__left-sidebar crayons-layout__left-sidebar" data-controller="sidebar" data-action="load@window->sidebar#disableCurrentNavItem">
      <%= render "admin/shared/nested_sidebar", menu_items: AdminMenu.navigation_items %>
    </div>
    <main id="main-content" class="crayons-layout__content min-w-0 p-2">
      <%= javascript_include_tag "admin/flashMessages", defer: true %>
      <% flash.each_with_index do |(type, message), i| %>
        <div
          id="notice-container"
          data-controller="notice"
          data-notice-target="noticeZone"
          data-testid="flash-<%= type %>"
          class="mb-4 crayons-notice crayons-notice--<%= type == "info" || type == "success" ? "success" : "danger" %>">
          <span id="flash-<%= i %>"><%= message %></span>
          <button class="crayons-notice--close js-flash-close-btn" data-action="click->notice#closeNotice" aria-label="Dismiss message" aria-describedby="flash-<%= i %>">
            <%= crayons_icon_tag(:x, aria_hidden: true) %>
          </button>
        </div>
      <% end %>

      <div
        data-controller="alert"
        data-action="error:generate@document->alert#generateErrorAlert"
        data-testid="alertzone">
          <div data-alert-target="alertZone" role="alert"></div>
      </div>

      <%# We want to skip /admin/path but render /admin/nested/path %>
      <% if request.path.split("/")[-3] == "admin" %>
        <%= render "admin/shared/tabbed_navbar", menu_items: AdminMenu.nested_menu_items_from_request(request) %>
      <% end %>

      <%= yield %>
      <% if @help_url %>
        <%= render "shared/help_icon" %>
      <% end %>
    </main>
  </div>

  <div data-snackbar-target="snackZone"></div>
</body>
</html>
